<template>
    <div id="met-component">
        <el-container class="log-container">
            <el-aside class="log-aside">
            </el-aside>
            <!-- 在这个计数器外包裹一层div 计划做出鼠标点击弹出特效 或许需要用到canvas的知识 -->
        <div id="effectsBox">
            <el-input-number v-model="$store.state.count" @change="handlechange" label="click here" id="clickBox"></el-input-number>
        </div>
            <el-main class="log-main">
                <el-radio-group v-model="radio" class="changelang" @input="changelang">
                    <el-radio-button label="zn"></el-radio-button>
                    <el-radio-button label="en"></el-radio-button>
                </el-radio-group>
                <logCard></logCard>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import { post } from '@/api/serves'
import logCard from '@/components/logcard/logcardcompoment.vue'
export default {
    name: 'MetComponent',
    components: {
        logCard
    },
    data() {
        return {
            radio: 'zn',
            BASEURL: ''
        }
    },
    // 计算属性
    computed: {},
    // 监控data中数据变化
    watch: {},
    // 方法合集
    methods: {
        // async getSome() {
        //     const res = await post(this.BASEURL+'getListById', {})
        //     console.log(res, 'res');
        // },
        changelang(e) {
            this.$i18n.locale = e
        },
        handlechange(e){
            // 通过mutation修改store中的数据
            this.$store.commit('changeCount',this.$store.state.count,e)
        }
    },
    // 生命周期 - 创建完成（可以访问当前this 实例）
    created() {
        this.BASEURL = this.$GLOBAL.BASE_URL
        console.dir(post, '>>>post')
    },
    // 生命周期 - DOM树挂载完成（可以访问DOM元素）
    mounted() { },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeUnmount() { }, //生命周期 - 销毁之前
    unmounted() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
#met-component {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(#007acc, #dd001b);
}

.log-aside {
    width: 300px;
    background: linear-gradient(180deg, rgba(0, 145, 255, 0.049) 0%, rgba(0, 26, 56, 0.098) 100%) repeat;
    border: 2px solid;
    border-image: linear-gradient(180deg, rgba(0, 255, 255, 0.49)0%, rgba(0, 167, 197, 0.245) 2 2);
    background-image: url('~@/static/log.jpg');
    background-position: center top;
}

.log-main {}

.log-container,
.log-aside,
.log-main {
    height: 100%;

    .changelang {
        position: fixed;
        top: 5px;
        left: calc(100% - 120px);
    }
}
#clickBox{
    position:fixed;
    left:300px;
    top: 2px;
}
</style>